<template>
  <view class="course-page">
    <!-- 导航栏组件 -->
    <NavBar :title="info.lessonName"></NavBar>
    <view class="content" :style="getContentStyle()">
      <scroll-view class="content-list" scroll-y="true" :show-scrollbar="false">
        <view class="card">
          <view class="card-head">
            <text class="card-head-title">销售话术</text>
            <!-- <view class="read-btn">
              <image class="read-btn-icon" src="/static/images/read-icon.png" mode="scaleToFill"></image>
              <text class="read-btn-txt">语音朗读</text>
            </view> -->
          </view>
          <view class="card-line" style="margin-bottom: 0px;"></view>
          <view v-for="(item, index) in info.questions" :key="index" class="question">
            <view class="question-cell">
              <text class="question-cell-tag">{{ item.tag }}</text>
              <view class="question-cell-title">{{ item.question }}</view>
            </view>
            <view class="response-cell">
              <view class="response-cell-title">{{ item.response }}</view>
            </view>
          </view>
        </view>
        <view class="card">
          <view class="card-head">
            <text class="card-head-title">关键词</text>
          </view>
          <view class="card-line"></view>
          <view class="tag-box">
            <text v-for="(item, index) in info.tags" :key="index" class="tag">{{ item }}</text>
          </view>
        </view>
        <view v-if="info.files && info.files.length" class="card" style="padding-bottom: 0px;">
          <view class="card-head">
            <text class="card-head-title">学习附件</text>
          </view>
          <view class="card-line"></view>
          <view class="att-box">
            <view v-for="(item, index) in info.files" :key="index" class="att-cell">
              <image class="att-cell-icon" :src="getFlieIcon(item)" mode="scaleToFill"></image>
              <text class="att-cell-name">{{ item.fileName }}</text>
              <text class="att-cell-size">{{ getFileSize(item.fileSize) }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="bottom-box">
        <view class="bottom-tag">任务</view>
        <view v-for="(item, index) in info.studySituation" @click="handleGoLean(item)" :key="index" class="bottom-item">
          <view class="item-t">
            <image class="item-t-icon" :src="item.state > 0 ? '/static/images/icon-dui-g.png' : '/static/images/icon-dui-h.png'"></image>
            <view class="item-t-txt" :class="item.state > 0 ? 'item-t-txt-black' : ''">{{ item.name }}</view>
          </view>
          <view class="item-b">
            <view v-if="item.state > 0" class="item-b-tag">已完成</view>
            <template v-else>
              <view class="item-b-txt">去练习</view>
              <image class="item-b-icon" src="/static/images/icon-dui-a.png"></image>
            </template>
          </view>
        </view>
        <!-- <view class="plan">
          <template v-for="(item, index) in info.studySituation" :key="index">
            <view class="plan-line plan-line-white"></view>
            <view @click="handleGoLean(item)" class="plan-circle-box">
              <image v-if="item.state > 0" class="plan-icon" src="/static/images/plan-icon.png" mode="scaleToFill"></image>
              <view v-else class="plan-circle"><view></view></view>
            </view>
            <view class="plan-line plan-line-white"></view>
          </template>
        </view>
        <view class="plan-txt">
          <text v-for="(item, index) in info.studySituation" :key="index" @click="handleGoLean(item)" :class="{ 'plan-txt-black': item.state > 0 }">{{ item.name }}</text>
        </view> -->
      </view>
    </view>
  </view>
</template>

<script >
import { getLesson } from '@/api/course.js'

export default {
  data() {
    return {
      courseId: '',
      lessonId: '',
      planNumber: 0,
      questionsMap: {
        F: '这个产品有什么特征？',
        A: '相对竞争对手有什么优势？',
        B: '这些优势能给客户带来什么好处？',
        E: '有什么证据支撑？如案例、认证等',
      },
	  questionsTagMap: {
	    F: '特征',
	    A: '优势',
	    B: '利益',
	    E: '证据',
	  },
      info: {
        lessonName: '',
        tags: [],
        files: [],
        questions: []
      }
    }
  },
  onLoad(options) {
    this.courseId = options.courseId
    this.lessonId = options.lessonId
  },
  onShow() {
    this.getInfo()
  },
  methods: {
    getFileSize(bytes) {
      // 将byte大小转换成MB或者GB
      if (!bytes || bytes === 0) return '0 B'
      
      const k = 1024
      const sizes = ['B', 'KB', 'MB', 'GB']
      const i = Math.floor(Math.log(bytes) / Math.log(k))
      
      // 保留两位小数
      const size = (bytes / Math.pow(k, i)).toFixed(2)
      
      return `${size}${sizes[i]}`
    },
    async getInfo() {
      this.info = await getLesson(this.courseId, this.lessonId)
      this.info.questions = []
      this.info.tags = []
      this.planNumber = 0
      Object.keys(this.questionsMap).map((key) => {
        if (this.info.salesLanguageMap[key]) {
          this.info.questions.push({
            key,
            question: this.questionsMap[key],
            tag: this.questionsTagMap[key],
            response: this.info.salesLanguageMap[key]
          })
        }
      })
      // 设置tags，从keywords解析
      if (this.info.keywords) {
        this.info.tags = this.parseKeywords(this.info.keywords)
      }
      // 获取当前训练状态
      this.info.studySituation.forEach(item => {
        if (item.exerciseType === 102 && item.state === 1) {
          this.planNumber = 1
        } else if (item.exerciseType === 103 && item.state === 1) {
          this.planNumber = 2
        } else if (item.exerciseType === 104 && item.state === 1) {
          this.planNumber = 3
        }
      })
    },
    parseKeywords(keywords) {
      if (!keywords || typeof keywords !== 'string') {
        return []
      }
      // 定义可能的分隔符
      const delimiters = ['，', ',', '， ', ', ', '、']
      // 找出第一个存在的分隔符
      let delimiter = ''
      for (let i = 0; i < delimiters.length; i++) {
        if (keywords.indexOf(delimiters[i]) !== -1) {
          delimiter = delimiters[i]
          break
        }
      }
      // 如果找到分隔符，进行切割
      if (delimiter) {
        return keywords.split(delimiter).map((item) => item.trim()).filter((item) => item)
      }
      // 如果没有找到分隔符，返回单个元素的数组
      return keywords.trim() ? [keywords.trim()] : []
    },
    getContentStyle() {
      const statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0
      return {
        height: `calc(100% - ${(statusBarHeight + 44)}px)`
      }
    },
    handleGoLean(item) {
      console.log('this.info', JSON.stringify(this.info))
      if (Number(item.exerciseType) === 102 || Number(item.exerciseType) === 103) {
        if (item.isGenerateReports === 2 || item.isGenerateReports === '2') {
          uni.navigateTo({url: `/pages/course/follow/report/index?exerciseId=${item.exerciseId}`})
        } else {
          const pageData = {
            questions: this.info.questions,
            courseId: this.courseId,
            lessonId: this.lessonId,
            exerciseType: item.exerciseType
          }
          const json = JSON.stringify(pageData)
          uni.navigateTo({
            url: `/pages/course/follow/index?l=${json}`
          })
        }
      }
    },
	  getFlieIcon(item) {
      if (['mp4'].includes(item.fileExtension)) {
        return '/static/images/att-icon-video.png'
      } else if (['mp3'].includes(item.fileExtension)) {
        return '/static/images/att-icon-audio.png'
      } else if (['ppt'].includes(item.fileExtension)) {
        return '/static/images/att-icon-ppt.png'
      } else {
        return '/static/images/att-icon.png'
      }
	  }
  }
}
</script>

<style lang="scss">
.course-page {
  width: 100%;
  height: 100vh;
  background: linear-gradient(207deg, #DCECFF 2%, #F6F7FB 61%);
}

.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  .content-list{
    width: calc(100% - 64rpx);
    height: calc(100% - 192rpx);
    padding-top: 16rpx;
    padding-bottom: 32rpx;
    padding-right: 32rpx;
    padding-left: 32rpx;
  }
  .content-txt{
    color: #666666;
    font-size: 28rpx;
    line-height: 44rpx;
  }
}

.card{
  width: 100%;
  background: #FFFFFF;
  border-radius: 24rpx;
  padding: 0 48rpx;
  padding-bottom: 32rpx;
  margin-bottom: 32rpx;
  display: flex;
  flex-direction: column;
  .card-head{
    width: 100%;
    height: 110rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    .card-head-title{
      color: #333333;
      font-size: 32rpx;
      line-height: 48rpx;
      font-weight: 600;
      line-height: 110rpx;
      flex: 1;
    }
  }
  .card-line{
    width: 100%;
    border-top: 2rpx solid #EBEDEF;
    margin-bottom: 32rpx;
  }
}

.bottom-box{
  width: 100%;
  height: 164rpx;
  background: #FFFFFF;
  padding: 0 32rpx;
  display: flex;
  align-items: center;
  .bottom-tag{
    margin-right: 32rpx;
    width: 60rpx;
    height: 132rpx;
    border-radius: 8rpx;
    padding: 8rpx 16rpx;
    background: #E6F3FF;
    color: #315BF4;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 36rpx;
    display: flex;
    align-items: center;
  }
  .bottom-item{
    width: 33%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .item-t{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8rpx;
      .item-t-icon{
        width: 32rpx;
        height: 32rpx;
        margin-right: 8rpx;
      }
      .item-t-txt{
        line-height: 44rpx;
        color: #999999;
        font-weight: 500;
      }
      .item-t-txt-black{
        color: #1F1F1F;
      }
    }
    .item-b{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .item-b-tag{
        width: 88rpx;
        height: 48rpx;
        border-radius: 8rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #2AB55E;
        font-size: 24rpx;
      }
      .item-b-txt{
        color: #315BF4;
        font-size: 24rpx;
        line-height: 48rpx;
      }
      .item-b-icon{
        width: 28rpx;
        height: 28rpx;
      }
    }
  }
  .plan{
    width: 100%;
    height: 44rpx;
    margin-top: 32rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    .plan-circle-box{
      margin: 0 8rpx;
    }
    .plan-circle{
      width: 32rpx;
      height: 32rpx;
      border-radius: 600px;
      background: #C9CDD4;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      view{
        border-radius: 600px;
        width: 16rpx;
        height: 16rpx;
        background: #FFFFFF;
      }
    }
    .plan-line{
      flex: 1;
      background: #E2E5E8;
      height: 2rpx;
    }
    .plan-line-blue{
      background: #BDDEFF;
    }
    .plan-line-white{
      background: #FFFFFF;
    }
  }
  .plan-icon{
    width: 44rpx;
    height: 44rpx;
  }
  .plan-txt{
    width: 100%;
    margin-top: 8rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    text{
      font-size: 28rpx;
      font-weight: 500;
      line-height: 44rpx;
      text-align: center;
      color: #999999;
      display: block;
      flex: 1;
    }
    .plan-txt-black{
      color: #1F1F1F;
    }
  }
}
.read-btn{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10rpx 32rpx;
  border: 1rpx solid #B9BBBF;
  border-radius: 16rpx;
  .read-btn-icon{
    width: 32rpx;
    height: 32rpx;
    margin-right: 8rpx;
  }
  .read-btn-txt{
    font-size: 28rpx;
    line-height: 44rpx;
    color: #666666;
  }
}

.question{
  margin-top: 32rpx;
  .question-cell{
    display: flex;
    flex-direction: row;
    align-items: baseline;
    margin-bottom: 24rpx;
    .question-cell-tag{
      height: 44rpx;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      background: #EE8049;
      font-size: 24rpx;
      color: #FFFFFF;
      margin-right: 12rpx;
      border-radius: 8rpx;
	  padding: 0 8rpx;
    }
    .question-cell-title{
      flex: 1;
      color: #333333;
      line-height: 44rpx;
      font-size: 32rpx;
      font-weight: 800;
    }
  }
  .response-cell{
    display: flex;
    flex-direction: row;
    align-items: baseline;
    .response-cell-tag{
      width: 40rpx;
      height: 44rpx;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      background: #3DBA6D;
      font-size: 24rpx;
      color: #FFFFFF;
      margin-right: 12rpx;
      border-radius: 8rpx;
    }
    .response-cell-title{
      flex: 1;
      color: #666666;
      line-height: 44rpx;
      font-size: 32rpx;
    }
  }
}

.tag-box{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: -12rpx;
  .tag{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4rpx 8rpx;
    background: #E6F3FF;
    border-radius: 8rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    color: #315BF4;
    margin-right: 12rpx;
    margin-bottom: 12rpx;
  }
}

.att-cell{
  width: 100%;
  margin-bottom: 32rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  .att-cell-icon{
    width: 44rpx;
    height: 44rpx;
    margin-right: 16rpx;
  }
  .att-cell-name{
    flex: 1;
    margin-right: 64rpx;
    color: #1F1F1F;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 44rpx;
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏溢出的文本 */
    text-overflow: ellipsis; /* 显示省略号来代表被修剪的文本 */
  }
  .att-cell-size{
    color: #999999;
    font-size: 24rpx;
    line-height: 20px;
  }
}
</style>
